<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>权限管理系统</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }

        #app a{
            text-decoration: none;
            color:#cccccc;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container style="height: 800px; border: 1px solid #eee">
            <el-header style="width:100%;text-align: left;height: 60px;line-height: 60px; color:#fff;background: #66b1ff">
                <img src="/images/logo.png" style="width: 100px;height: 60px;" align="center" >
                <span style="font-size: 20px;">百里半ERP管理系统</span>
                <div style="float: right">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                    </el-dropdown>
                    <span sec:authentication="name">王小虎</span>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px" style="background-color: #545c64">
                    <el-menu
                            class="el-menu-vertical-demo"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <el-submenu :index="fun.id" v-for="fun in functions">
                            <template slot="title"><i :class="fun.icon"></i>{{fun.name}}</template>
                            <el-menu-item-group>
                                <el-menu-item :index="cfun.id" v-for="cfun in fun.subFunctions">
                                    <a :href="cfun.url" target="content">{{cfun.name}}</a>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <iframe style="width: 100%;height: 100%;border:0px" name="content" src="/page/role/list.html"></iframe>
                </el-main>
            </el-container>
        </el-container>
        <el-footer style="background:#545c64;color:#fff;width: 100%;height: 60px;line-height: 60px;text-align: center">百里半版权所有 &copy;</el-footer>
    </div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    functions:[] //权限列表
                }
            },
            methods:{
                //连接后台，读取登录用户的权限
                loadFunctions(){
                    axios.get("/functions/username")
                        .then(res => {
                           this.functions = res.data;
                        });
                }
            },
            mounted(){
                this.loadFunctions();
            }
        })
    </script>
</body>
</html>